<template>
  <div >
    <div class="text-16 text-white flex justify-between align-center " >
      <div>编辑变量</div>
      <div class="text-right">
        <a-button size="small" ghost @click="previewCode" class="mx-2">源码预览</a-button>
        <a-button type="primary" size="small" ghost @click="previewUI">界面预览</a-button>
      </div>
    </div>
    <a-divider></a-divider>

    <div class="flex flex-col gr-2 prop-config relative"  id="props">
      <ListItem>
        <div>默认值</div>
        <a-input
          placeholder="输入值"
          size="small"
          v-model:value="selectItemConfig.defaultValue"
          style="width: 200px"
        ></a-input>
      </ListItem>
      <ListItem>
        <div>标题</div>
        <a-input
          placeholder="键名描述"
          size="small"
          v-model:value="selectItemConfig.title"
          style="width: 200px"
        ></a-input>
      </ListItem>
      <ListItem>
        <div>描述信息</div>
        <div>
          <a-textarea
            size="small"
            v-model:value="selectItemConfig.desc"
            :autoSize="{ minRows: 2, maxRows: 6 }"
            placeholder="输入对该字段的描述信息"
            style="width: 200px"
          ></a-textarea>
        </div>
      </ListItem>
      <ListItem @click="showModeSetting = !showModeSetting">
        <div>高级配置</div>
        <div>
          <a-button size="small" ghost shape="circle">
            <template #icon>
              <PlusOutlined  :rotate="!showModeSetting ? 0 : 45" />
            </template>
          </a-button>
        </div>
      </ListItem>

      <!-- 高级配置 -->
      <div class="more-settings flex flex-col gr-2" v-if="showModeSetting">
        <ListItem>
          <div>校验值</div>
          <a-input
            placeholder="用于计算得分"
            size="small"
            v-model:value="selectItemConfig.correctValue"
            style="width: 200px"
          ></a-input>
        </ListItem>
        <ListItem>
          <div>分数</div>
          <a-input
            placeholder="分数用于统计成绩"
            size="small"
            v-model:value="selectItemConfig.score"
            style="width: 200px"
          ></a-input>
        </ListItem>
        <ListItem>
          <div>是否为必填项</div>
          <div>
            <a-switch v-model:checked="selectItemConfig.require" />
          </div>
        </ListItem>
        <ListItem>
          <div>内容是否可编辑</div>
          <div>
            <a-switch v-model:checked="selectItemConfig.canEdit" />
          </div>
        </ListItem>

        <ListItem>
          <div>选择值的形式</div>
          <a-select
            v-model:value="selectItemConfig.valueType"
            size="small"
            @change="selectComponent"
            :options="selection.option"
            style="width: 200px"
          >
          </a-select>
        </ListItem>
        <KeepAlive>
          <component :is="currentComponent" class="mt-2"></component>
        </KeepAlive>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, onUpdated, ref, shallowRef, watch } from "vue";
import { setProp, treeBus } from "../bus/treeData";
import ListItem from "@/views/components/InListItem.vue";
import { showSourceCode, showUI } from "../bus/source";
import { valueTypeOptions } from '@/data/config';
import { PlusOutlined } from '@ant-design/icons-vue';

const showModeSetting = ref(false);
const currentItem = computed(() => {
  return treeBus.selectItem;
});
const selectItemConfig = computed(() => {
  return treeBus.selectItem;
});
const previewUI = () => {
  showUI();
  setProp(treeBus.selectItem);
};

const previewCode = () => {
  showSourceCode(currentItem.value);
};
watch(treeBus, () => {
  selectComponent();
});
onMounted(()=>{
  selectComponent();
})
const currentComponent = shallowRef();

const selectComponent = () => {
  selection.value.option.find((item) => {
    if (item.value == currentItem.value.valueType) {
      currentComponent.value = item.component;
    }
  });
};
const selection = ref({
  value: "string",
  option:valueTypeOptions
});
</script>

<style lang="scss" scoped>
%center {
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.prop-title {
  height: 42px;
  line-height: 42px;
}
::v-deep(.ant-radio-button-wrapper) {
  background-color: transparent;
  color: #999;
}
.prop-config {
  // height: calc(100vh - 200px);
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
}
</style>
